import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import ListTable from 'components/ListTable'
import getLableList from 'graphql/project/taskAssign/labelList.graphql'
import getLablePageInfo from 'graphql/project/taskAssign/labelPageInfo.graphql'
import Icons from 'utils/constents/icons'

const dataOpts = [
  {
    src: Icons.EDIT,
    text: '编辑',
  },
  {
    src: Icons.DELETE,
    text: '删除',
  },
]

const FileList = url => ({ data }) => (
  <React.Fragment>
    {data.assign_task.map(task => (
      <ListTable.Row hasCheckBox>
        <ListTable.Avatar src={task.creator.avatar} url={undefined} text={task.creator.name} />
        <ListTable.Cell>{task.type}</ListTable.Cell>
        <ListTable.Cell>{task.state}</ListTable.Cell>
        <ListTable.Time>{task.create_at}</ListTable.Time>
        <ListTable.Action width={2} options={dataOpts} />
      </ListTable.Row>
    ))}
  </React.Fragment>
)

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { match, project } = this.props
    const { projectId } = project
    const newTeamUrl = `/project/${project.orgName}/${project.projectName}/task/assign/new`
    const globalActions = [
      {
        text: '分配任务',
        url: newTeamUrl,
      },
    ]
    const RenderList = FileList(match.url)
    return (
      <ListTable
        globalActions={globalActions}
        pagination={{
          query: getLablePageInfo,
          name: 'assign_task_aggregate',
          variables: {
            projectId,
          },
        }}
        listData={{
          query: getLableList,
          variables: {
            projectId,
            limit: 10,
          },
          header: (
            <ListTable.Header hasCheckBox>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                创建人
              </ListTable.HeaderCell>
              <ListTable.HeaderCell />
              <ListTable.HeaderCell>任务类型</ListTable.HeaderCell>
              <ListTable.HeaderCell>状态</ListTable.HeaderCell>
              <ListTable.HeaderCell>加入时间</ListTable.HeaderCell>
              <ListTable.HeaderCell />
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '没有成员',
          action: {
            text: '添加项目成员',
            url: newTeamUrl,
          },
        }}
      />
    )
  }
}

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(DatasetData)
